<template>
  <div>
    <!-- v-if 条件判断 属性值必须是布尔类型表达式 -->
    <p v-if="score>90">优秀</p>
    <p v-else-if="score>80">良好</p>
    <p v-else-if="score>60">及格</p>
    <p v-else>不及格</p>
    <!--     v-if 和 v-show 区别
    共同点:
    1. 属性值必须是布尔类型表达式
    2. 当条件成立时，才会渲染到页面中 
    3. 若需要实现元素的隐藏或显示，可以通过v-if/v-show完成 

    不同点:
    1. v-if的特点: 每次都会根据属性值，重新删除或创建DOM元素，有较高的切换性能消耗 
    2. v-show的特点: 每次不会重新删除或创建DOM元素，仅仅只是切换了元素的样式 display:none 

    总结:
    1. 如果元素涉及到频繁的切换隐藏或显示，最好不要使用v-if，推荐使用v-show 
    2. 如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if 
    v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 
    如果在运行时绑定条件很少改变，则 v-if 会更合适。
 -->

    <p v-if="flag">厉害</p>
    <p v-show="flag">牛牛牛</p>
    <button @click="flag=!flag">切换</button>

  </div>
</template>

<script>
export default {
    data(){
        return{
            score:50,
            flag:false
        }
    }

}
</script>

<style>

</style>